<template>
  <div class="optimizationIndex-container">
    <div class="content-container">
        <div class="itemContainer">
        <div class="">
          <span class="optimizationNameTitle">营销计划</span>
        </div>
        <!-- <div id="saleSummaryChart" style="height: 300px"></div> -->
      </div>
      <!-- <el-card class="box-card"></el-card> -->
        <el-tabs type="border-card">
            <el-tab-pane label="年计划">
                    <div v-if="this.detailsYear">
                        <p style="padding:10px 0">产品销售年计划</p>
                        <el-card style="cursor: pointer;" @click.native="getYearPlanDetails(thisYear.planTime)">
                            <el-row>
                                <el-col :span="6">
                                    <h2>{{this.thisYear.planTime}}年年计划</h2>
                                    <p>
                                        <button style="border:0px;background:orange;border-radius:20%;color:#fff">计划</button>
                                    </p>
                                    <span>{{this.thisYear.categoryNumber}}</span>个产品类,<span>{{this.thisYear.productCodeNumber}}</span>个产品型
                                </el-col>
                                <el-col :span="4" style="text-align:center">
                                    <h2 style="height:10px"></h2>
                                    <p style="color:#19abe4;font-size:32px">{{this.thisYear.adjustNumber}}</p>
                                    <p>调整次数</p>
                                </el-col>
                                <el-col :span="5" style="text-align:center">
                                    <h2 style="height:36px"></h2>
                                    <p>{{this.thisYear.newDevelopTime}}</p>
                                    <p>最新发布时间</p>
                                </el-col>
                                <el-col :span="5" style="text-align:center">
                                    <h2 style="height:10px"></h2>
                                    <p style="color:#9280d4;font-size:32px">{{this.thisYear.yearPlanAmount}}</p>
                                    <p>年计划额</p>
                                </el-col>
                            <el-col :span="4" style="text-align:center">
                                    <h2 style="height:10px"></h2>
                                    <p style="color:#e0486e;font-size:32px">{{this.thisYear.yearFinishRatio}}%</p>
                                    <p>销售额完成度</p>
                                </el-col>
                            </el-row>
                        </el-card>
                        <p style="padding:10px 0">历史销售年计划</p>
                        <el-card style="margin:5px" v-for="(item,indexS) in this.allYearPlanDetailsData" :key="indexS" @click.native="getYearPlanDetails(item.planTime)">
                            <el-row>
                                <el-col :span="6">
                                    <h2>{{item.planTime}}年年计划</h2>
                                    <p>
                                        <button style="border:0px;background:orange;border-radius:20%;color:#fff">计划</button>
                                    </p>
                                    <span>{{item.categoryNumber}}</span>个产品类,<span>{{item.productCodeNumber}}</span>个产品型
                                </el-col>
                                <el-col :span="4" style="text-align:center">
                                    <h2 style="height:10px"></h2>
                                    <p style="color:#19abe4;font-size:32px">{{item.adjustNumber}}</p>
                                    <p>调整次数</p>
                                </el-col>
                                <el-col :span="5" style="text-align:center">
                                    <h2 style="height:36px"></h2>
                                    <p>{{item.newDevelopTime}}</p>
                                    <p>最新发布时间</p>
                                </el-col>
                                <el-col :span="5" style="text-align:center">
                                    <h2 style="height:10px"></h2>
                                    <p style="color:#9280d4;font-size:32px">{{item.yearPlanAmount}}</p>
                                    <p>年计划额</p>
                                </el-col>
                            <el-col :span="4" style="text-align:center">
                                    <h2 style="height:10px"></h2>
                                    <p style="color:#e0486e;font-size:32px">{{item.yearFinishRatio}}%</p>
                                    <p>销售额完成度</p>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                    <div v-else>
                        <div style="padding:10px 0">
                            {{this.oneYearDetails.planTime}}年年计划
                        <div class="pickerOption">
                            <span>当前时间{{this.year}}年{{this.mon}}月{{this.day}}日</span>
                        <el-button  style="margin 0 10px" size="small" type="primary" @click="detailsYear = true" >返回</el-button>
                            </div>
                        </div>
                        <div style="clear:both;margin:10px 0">
                        <el-card>
                            <el-select size="small"
                                placeholder="选择时间"
                                v-model="chooseDataYear"
                                style="width: 156px;"
                                @change="chooseyearForChange"
                                >
                                <el-option
                                    v-for="(n,index) in 10"
                                    :key="index"
                                    :label="year - n"
                                    :value="year - n">
                                </el-option>
                            </el-select>
                            当前计划:{{this.oneYearDetails.draftName}}
                            <div class="pickerOption">
                                <el-button  style="margin 0 10px" size="small" type="primary" >新建销售计划</el-button>
                            </div>
                            <el-row  :gutter="20" style="margin:20px 0">
                                <el-col :span="12">
                                    <el-row  :gutter="20" style="margin:20px 0">
                                            <el-col :span="12"  style="text-align:center">
                                                <!-- <el-progress type="circle" :percentage="oneYearDetails.planTime"></el-progress> -->
                                                <div style="height:126px;width:126px;background:pink;padding:7px;border-radius: 50%;margin:3px auto;background: linear-gradient(to right, #9c96e7, #64bef5);">
                                                    <div style="width:100%;height:100%;border-radius: 50%;background:#fff;line-height:106px">
                                                        {{this.oneYearDetails.yearPlanCount}}
                                                    </div>
                                                </div>
                                                <p>年计划销售额(万元)</p>
                                            </el-col>
                                            <el-col :span="12"  style="text-align:center">
                                                <el-progress type="circle" :percentage="this.oneYearDetails.yearPlanAmount"></el-progress>
                                                <p>年销售额完成度</p>
                                            </el-col>
                                            <!-- <el-col :span="8"  style="text-align:center">
                                                <el-progress type="circle" :percentage="60"></el-progress>
                                                <p>销售额完成速率</p>
                                            </el-col> -->
                                        </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row  :gutter="20" style="margin:20px 0">
                                            <el-col :span="12"  style="text-align:center">
                                                 <div style="height:126px;width:126px;background:pink;padding:7px;border-radius: 50%;margin:3px auto;background: linear-gradient(to right, #9c96e7, #64bef5);">
                                                    <div style="width:100%;height:100%;border-radius: 50%;background:#fff;line-height:106px">
                                                        {{this.oneYearDetails.categoryNumber}}
                                                    </div>
                                                </div>
                                                <p>品类数</p>
                                            </el-col>
                                            <el-col :span="12"  style="text-align:center">
                                                <div style="height:126px;width:126px;background:pink;padding:7px;border-radius: 50%;margin:3px auto;background: linear-gradient(to right, #9c96e7, #64bef5);">
                                                    <div style="width:100%;height:100%;border-radius: 50%;background:#fff;line-height:106px">
                                                        {{this.oneYearDetails.productCodeNumber}}
                                                    </div>
                                                </div>
                                                <p>产品数</p>
                                            </el-col>
                                        </el-row>
                                </el-col>
                            </el-row>
                            <div id="saleSummaryChart" style="height:300px;width:100%"></div>
                             <el-button-group>
                                <el-button size="small" autofocus type="secondary" >计划草案</el-button>
                                <el-button size="small" type="secondary">历史计划</el-button>
                            </el-button-group>
                            <br><br>
                             <el-date-picker
                                size="mini"
                                v-model="dataPicker"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                            <el-table
                        :data="oneYearDetails.list"
                        style="width: 100%;margin-top:20px">
                        <el-table-column
                            type="index"
                            label="序号"
                           >
                        </el-table-column>
                        <el-table-column
                            prop="draftName"
                            label="历史计划表"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="planSaleAmount"
                             sortable
                            label="计划销额">
                        </el-table-column>
                        <el-table-column
                            prop="planSaleCompletionRate"
                            label="完成度"
                             sortable
                            >
                        </el-table-column>
                        <el-table-column
                            prop="categoryName"
                            sortable
                            label="品类"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="productName"
                            sortable
                            label="产品">
                        </el-table-column>
                        <el-table-column
                            prop="dataTime"
                            label="创建时间"
                            sortable
                            >
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="操作"
                            >
                            <template slot-scope="scope">
                                <el-button type="text" @click="showdeltail = true;">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    </el-card>
                        </div>
                    </div>
                </el-tab-pane>

            <el-tab-pane label="月计划" @tab-click="">
                <moun-plan></moun-plan>
            </el-tab-pane>
        </el-tabs>

    </div>
  </div>
</template>

<script>
  import mounPlan from "./mounPlan.vue";
  import * as opreate from 'api/getData'

  export default {
    name: "optimizationIndex",
    components: {
      mounPlan
    },
    data() {
      return {
        dataPicker: [],
        chooseDataYear: '',
        showdeltail: false,
        showUpProduct: false,
        activeName: 'second',
        chooseMonths: false,
        showEditProduct: false,
        saleDataTotal: false,
        tableData: [],
        allYearPlanDetailsData: [],
        thisYear:[],
        detailsYear: true,
        oneYearDetails: [],
        year:'',
        mon:'',
        day:'',
        productCode: null,
        catagoryData: [],
        saleSummary: [],
        mainchart: []
      }
    },
    mounted() {
        this.getallYearPlanDetails()
        this.getThisDate()
    },
    methods: {
      getThisDate() {
        let newDate = new Date()
        this.year =  newDate.getFullYear()
        this.mon = newDate.getMonth() + 1
        this.day = newDate.getDate()
        opreate.detailPlanYear({
          yearPlanTime:  newDate.getFullYear()
        }).then(res => {
          this.thisYear = res.data
        })
      },
      chooseyearForChange() {
        opreate.detailPlanYear({
          yearPlanTime:  this.chooseDataYear
        }).then(res => {
          this.thisYear = res.data
        })
        opreate.getSaleMonthData({
          productCode: this.productCode,
          dateTime: this.chooseDataYear
        }).then(res => {
          this.mainchart = res.data[1]
          let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            legend: {
              data:['销售量','销售额']
            },
            xAxis: [
              {
                type: 'category',
                data: this.mainchart.map(item => item.dateTime)
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '销售量',
                axisLabel: {
                  formatter: '{value} '
                }
              },
              {
                type: 'value',
                name: '销售额',
                axisLabel: {
                  formatter: '{value} '
                }
              }
            ],
            series: [
              {
                name:'销售量',
                type:'bar',
                data:this.mainchart.map(item => item.actualSalesCount),
              },
              {
                name:'销售量',
                type:'line',
                smooth: true,
                data:this.mainchart.map(item => item.actualSalesCount),
              },
              {
                name:'销售额',
                type:'bar',
                data:this.mainchart.map(item => item.actualSalesAmount),
              },
              {
                name:'销售额',
                type:'line',
                smooth: true,
                data:this.mainchart.map(item => item.actualSalesAmount),
              },
            ]
          };
          myChart.setOption(option); // 使用刚指定的配置项和数据显示图表
        })
        let myChart = this.$echarts.init(document.getElementById('saleSummaryChart'));
      },
      getYearPlanDetails(yearPlanTime) {
        this.detailsYear = false
        this.getSaleSummary(1)
        opreate.detailPlanYear({ yearPlanTime }).then(res => {
          this.oneYearDetails = res.data
        })
      },
      getallYearPlanDetails() {
        opreate.getYearPlanDetail({}).then(res => {
          this.allYearPlanDetailsData = res.data
        })
      },
      ckicka() {
        this.getSaleSummary(1)
        opreate.getCategoryName().then(res => {
            this.catagoryData = res.data
        })
      },
      UpProduct() {
        this.showUpProduct = !this.showUpProduct
      },
      editProduct(){
        this.showEditProduct = !this.showEditProduct
      },
      showProductInfo() {
        this.saleDataTotal = !this.saleDataTotal
      },
      chooseMonth() {
        this.chooseMonths = true
      },
      chooseYear() {
         this.chooseMonths = false
      },
      getSaleSummary(num) {
        opreate.salesTrend(num).then((res) => {
          opreate.getSaleMonthData({
            productCode: this.productCode,
            dateTime: this.year - 1
          }).then(res => {
            this.mainchart = res.data[1]
            let option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              toolbox: {
                feature: {
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              legend: {
                data:['销售量','销售额']
              },
              xAxis: [
                {
                  type: 'category',
                  data: this.mainchart.map(item => item.dateTime)
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '销售量',
                  axisLabel: {
                    formatter: '{value} '
                  }
                },
                {
                  type: 'value',
                  name: '销售额',
                  axisLabel: {
                    formatter: '{value} '
                  }
                }
              ],
              series: [
                {
                  name:'销售量',
                  type:'bar',
                  data:this.mainchart.map(item => item.actualSalesCount)
                },
                {
                  name:'销售量',
                  type:'line',
                  smooth: true,
                  data:this.mainchart.map(item => item.actualSalesCount)
                },
                {
                  name:'销售额',
                  type:'bar',
                  data:this.mainchart.map(item => item.actualSalesAmount)
                },
                {
                  name:'销售额',
                  type:'line',
                  smooth: true,
                  data:this.mainchart.map(item => item.actualSalesAmount)
                },
              ]
            };
            myChart.setOption(option); // 使用刚指定的配置项和数据显示图表
          })
          let myChart = this.$echarts.init(document.getElementById('saleSummaryChart'));
        })
      }
    }
  }
</script>

<style scoped>
  .card_bg{
      padding: 10px 20px;
      border-bottom: 1px solid #ebeef5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background: #f5f7fa;
  }
  .Done {
      float: right;
      padding: 3px 0px;
      width: 80px;
      height: 81px;
      background: #0099CC;
      line-height: 80px;
      border-radius: 50%;
      text-align: center;
      position: absolute;
      right: -14px;
      top: -14px;
      color: #fff
  }
  .CardText {
      text-align: center;
      border-top: 1px solid #e2e2e2;
  }
  .itemTitle {
      background-color: #E8EEF4;
      height: 40px;
      padding: 0px 12px;
      line-height: 40px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 100%;
  }
  .optimizationName span{
    color: #fec63c;
    font-weight: 500
  }
  .optimizationName {
      width: 100%;
      height: 45px;
      line-height: 55px;
      display: block;
      padding-left: 15px;
      background-color: #E8EEF4;
  }
  .optimizationNameTitle {
      width: 100%;
      height: 35px;
      line-height: 35px;
      display: block;
      padding-left: 15px;
      background-color: #fff;
    font-weight: bold;
  }
  .optimizationIndex-container{
      background: #E8EEF4
  }
  .summaryHeader {
    padding: 10px 12px;
  }
  .whiteContainer {
    padding: 0 12px;
  }
  .contentHeader{
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
  }
  .pickerOption {
    display: flex;
    align-items: center;
    float: right;
  }
</style>
